﻿@model int

@{
    ViewBag.Title = "Details";
}

<h1 data-bind="text: title"></h1>

<section class="items-display">
    <h1>Characters</h1>
    <ul data-bind="foreach: characters, visible: characters().length > 0, accordion: {header: 'h2', autoHeight: false, collapsible: true, active: false}">
        <li>
            <h2><a href="#" data-bind="text: fullnameWithAbbrev"></a></h2>
            <div>
                <ul>
                    <li data-bind="text: categoryId"></li>
                    <li data-bind="visible: dateOfBirth != null">Date of Birth : <span data-bind="text: dateOfBirthFormatted"></span></li>
                    <li data-bind="visible: dateOfDeath != null">Date of Death : <span data-bind="text: dateOfDeathFormatted"></span></li>
                    <li data-bind="visible: !occupation && occupation.length > 0">Occupation : <span data-bind="text: occupation"></span></li>
                </ul>
                <a href="#" data-bind="click: $root.showCharacterDetails">details</a> <a href="#" data-bind="click: $root.editCharacter">edit</a>
            </div>
        </li>
    </ul>
    <p data-bind="visible: characters().length == 0">no characters</p>
</section>

<div id="viewCharacterBox" class="popup">
    <h1 data-bind="text: selectedCharacter().fullnameWithAbbrev"></h1>
    <p>Category : <span data-bind="text: selectedCharacter().categoryId"></span></p>
    <p>Gender : <span data-bind="text: selectedCharacter().genderFormatted"></span></p>
    <p>Date of Birth : <span data-bind="text: selectedCharacter().dateOfBirthFormatted"></span> Date of Death : <span data-bind="text: selectedCharacter().dateOfDeathFormatted"></span></p>
    <button data-bind="click: closeCharacterDetails">close</button>
</div>

<script type="text/javascript">
    ko.applyBindings(new StoryDetailsViewModel(@Model));
</script>